<template>
  <div class="detailLead">
    <top-bar title="Leads状态详情"></top-bar>
    <div class="card-list">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="card-body">
          <div class="card-body-item">
            <p class="card-label">RFP 1st Sent Date</p>
            <p class="card-value">{{ item["RFP 1st Sent Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">RFP ID</p>
            <p class="card-value">{{ item["RFP ID"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Share Id</p>
            <p class="card-value">{{ item["Lead Share Id"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Lead Status</p>
            <p class="card-value">{{ item["Lead Status"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Sender Full Name</p>
            <p class="card-value">{{ item["Sender Full Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Email Id</p>
            <p class="card-value">{{ item["Receiver Hotel Email Id"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Full Name</p>
            <p class="card-value">{{ item["Receiver Full Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Receiver Hotel Name</p>
            <p class="card-value">{{ item["Receiver Hotel Name"] }}</p>
          </div>
          <div class="card-body-item block">
            <p class="card-label">Meeting Name</p>
            <p class="card-value">{{ item["Meeting Name"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room Start Date</p>
            <p class="card-value">{{ item["Room Start Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Room End Date</p>
            <p class="card-value">{{ item["Room End Date"] }}</p>
          </div>
          <div class="card-body-item">
            <p class="card-label">Total Definite Revenue- USD</p>
            <p class="card-value">
              {{ item["Total Definite Revenue- USD"] | getEnUs }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="leads-btn-wrapper">
      <div class="leads-btn" @click="goSearchLeads">Leads状态查询</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import TopBar from "@/components/topBar.vue";
import moment from "moment";
export default {
  name: "detailLead",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    goSearchLeads() {
      this.$router.replace({
        path: "/searchLeads",
      });
    },
    getList() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$api
        .laeds_status_lists({
          rfp_id: this.$route.query.id,
        })
        .then((res) => {
          Toast.clear();
          this.list = res.data;
        });
    },
  },
  filters: {
    getEnUs(val) {
      return ((val * 1).toFixed(2) * 1).toLocaleString("en-US");
    },
  },
  components: {
    TopBar,
  },
};
</script>

<style lang="scss" scoped>
.detailLead {
  height: 100vh;
  background-color: #f4f4f4;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  overflow-y: auto;
  .leads-btn-wrapper {
    margin-top: 10px;
    padding-top: 30px;
    .leads-btn {
      margin: 0 15px;
      height: 55px;
      background: #224448;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      line-height: 55px;
    }
  }
  .card-list {
    .card {
      margin-top: 10px;
      background-color: #fff;
      .card-title {
        background: #224448;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
        }
      }
      .card-body {
        padding: 1px 15px 20px;
        word-break: break-all;
        .card-body-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          &.block {
            display: block;
            .card-value {
              padding-left: 15px;
              margin-top: 15px;
            }
          }
          .card-label {
            font-size: 13px;
            color: #666666;
            padding-left: 15px;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              width: 5px;
              height: 5px;
              background-color: #224448;
              border-radius: 50%;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }

          .card-value {
            font-size: 13px;
            font-weight: bold;
            color: #224448;
          }
        }
        .card-line {
          height: 1px;
          background-color: #f4f4f4;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>